Ext.onReady(function() {
	var store = Ext.create('Ext.data.JsonStore', {
						fields : [{
									name : 'cardNumber'
								}, {
									name : 'deptId'
								}, {
									name : 'tel'
								}, {
									name : 'cname'
								}, {
									name : 'status'
								}, {
									name : 'company'
								}, {
									name : 'vehicleType'
								}, {
									name : 'gname'
								}, {
									name : 'vehicleId'
								}, {
									name : 'cardType'
								},{
									name : 'creatDate'
								}],
						pageSize : 20, // 每页多少条
						proxy : {
							type : 'ajax',
							url : 'getAllCard.do',
							reader : {
								type : 'json',
								root : 'icards',
								totalProperty : 'total'
							},
							actionMethods : {
								create : 'POST',
								read : 'POST',
								update : 'POST',
								destroy : 'POST'
							}
						}
					});
			store.loadPage(1);
		//查询表单
		var sform = Ext.create('Ext.form.Panel', {
						frame : true,
						layout : {
							type : 'hbox',
							align : 'middle'
						},
						standardSubmit:true, //让表单以非Ajax方式提交
						defaults : {
							xtype : 'textfield',
							labelAlign : 'right',
							labelWidth : 80
						},
						region : 'north',
						items : [{
									fieldLabel : '卡号',
									name : ''
								},{
									xtype : 'button',
									margin : '0 0 0 10',
									iconCls : 'button-search',
									text : '查询'
									//handler : sear
								}]
					});
				//卡信息面板
				var grid1 = Ext.create('Ext.grid.Panel', {
						autoScroll: true,
						height : 280,
						columnLines : true,
						// selModel : selModel,
						viewConfig : {
							stripeRows : true
							// 在表格中显示斑马线
						},
						store : store,// 底部工具栏配置了，这里也必须配置
						tbar : [{
									xtype : 'button',
									text : '导出',
									iconCls : 'button-add',
									handler :function(){
											var form = sform.getForm();
											form.url="exportexcel.do";
											form.submit();
									}
								}],
						columns : [{
									xtype : "rownumberer",
									width : 60,
									align : 'center',
									header : '序号'
								}, {
									header : '卡号',
									width : 100,
									align : 'center',
									dataIndex : 'cardNumber'
								}, {
									header : '持卡人',
									width : 80,
									align : 'center',
									dataIndex : 'cname'
								}, {
									header : '卡类型',
									width : 80,
									align : 'center',
									dataIndex : 'cardType'
								}, {
									header : '客户单位',
									width : 140,
									align : 'left',
									dataIndex : 'company'
								}, {
									header : '车辆类型',
									width : 80,
									align : 'center',
									dataIndex : 'vehicleType'
								}, {
									header : '车牌号',
									width : 80,
									align : 'center',
									dataIndex : 'vehicleId'
								}, {
									header : '卡状态',
									width : 80,
									align : 'center',
									dataIndex : 'status'
								}, {
									header : '发卡站点',
									width : 140,
									align : 'left',
									dataIndex : 'deptId'
								}, {
									header : '发卡人',
									width : 100,
									align : 'center',
									dataIndex : 'gname'
								}, {
									header : '发卡日期',
									width : 160,
									align : 'center',
									dataIndex : 'creatDate',
									renderer : function (value){
											if (value == null || value == '') {
												return '<font color="red">未指定</font>';
											}else{
												return new Date(value).format("yyyy-MM-dd hh:mm:ss");
										}
									}
								}, {
									xtype : 'actioncolumn',
									text : '查看',
									align : 'center'
								}],
						dockedItems : [{
									xtype : 'pagingtoolbar',
									store : store, // 分页数据使用跟gridPanel同样的数据
									dock : 'bottom',
									displayMsg : '显示{0}-{1}条,共{2}条',
									emptyMsg : "没有数据",
									beforePageText : '第',
									afterPageText : '页共{0}页',
									displayInfo : true
								}]
					});
			var grid2 = Ext.create('Ext.grid.Panel', {
						autoScroll: true,
						height : 280,
						columnLines : true,
						// selModel : selModel,
						viewConfig : {
							stripeRows : true
							// 在表格中显示斑马线
						},
						store : store,// 底部工具栏配置了，这里也必须配置
						tbar : [{
									xtype : 'button',
									text : '导出',
									iconCls : 'button-add',
									handler :function(){
											var form = sform.getForm();
											form.url="exportexcel.do";
											form.submit();
									}
								}],
						columns : [{
									xtype : "rownumberer",
									width : 60,
									align : 'center',
									header : '序号'
								}, {
									header : '卡号',
									width : 100,
									align : 'center',
									dataIndex : 'cardNumber'
								}, {
									header : '持卡人',
									width : 80,
									align : 'center',
									dataIndex : 'cname'
								}, {
									header : '卡类型',
									width : 80,
									align : 'center',
									dataIndex : 'cardType'
								}, {
									header : '客户单位',
									width : 140,
									align : 'left',
									dataIndex : 'company'
								}, {
									header : '车辆类型',
									width : 80,
									align : 'center',
									dataIndex : 'vehicleType'
								}, {
									header : '车牌号',
									width : 80,
									align : 'center',
									dataIndex : 'vehicleId'
								}, {
									header : '卡状态',
									width : 80,
									align : 'center',
									dataIndex : 'status'
								}, {
									header : '发卡站点',
									width : 140,
									align : 'left',
									dataIndex : 'deptId'
								}, {
									header : '发卡人',
									width : 100,
									align : 'center',
									dataIndex : 'gname'
								}, {
									header : '发卡日期',
									width : 160,
									align : 'center',
									dataIndex : 'creatDate',
									renderer : function (value){
											if (value == null || value == '') {
												return '<font color="red">未指定</font>';
											}else{
												return new Date(value).format("yyyy-MM-dd hh:mm:ss");
										}
									}
								}, {
									xtype : 'actioncolumn',
									text : '查看',
									align : 'center'
								}],
						dockedItems : [{
									xtype : 'pagingtoolbar',
									store : store, // 分页数据使用跟gridPanel同样的数据
									dock : 'bottom',
									displayMsg : '显示{0}-{1}条,共{2}条',
									emptyMsg : "没有数据",
									beforePageText : '第',
									afterPageText : '页共{0}页',
									displayInfo : true
								}]
					});	
		//表格面板
		var panel = Ext.create('Ext.panel.Panel',{
			frame : true,
			//layout : 'hbox',
			region : 'center',
			items :[grid1,grid2]
		});
			Ext.create("Ext.Viewport", {
						title : '单卡记录查询',
						/*layout : {
							type : 'hbox',
							align : 'stretch'
						},*/
						layout : 'border',
						renderTo : Ext.getBody(),
						items : [sform,panel]
					});
		});